<template>
  <div class="container">
    <div class="apps">
        <Categories :categories="appCategories" :page-info=pageInfo />
        <NewApps />
    </div>
    <div class="top-download">
      <TopDownloads adSlot='9884228872' admId='div-gpt-ad-1747216663688-0' name='APK_Categories_Display_2' parent-page="Categories" />
    </div>
  </div>
</template>

<script setup>
import Categories from '@/components/Categories.vue'
import NewApps from '@/components/NewApps.vue'
import TopDownloads from '@/components/TopDownloads.vue'
import appCategories from '~/assets/data/categories/app_categories.json'
definePageMeta({
  title: 'Apps',
  layout: 'default'
})
const pageInfo = {
  type: 'apps',
  name: 'APP'
}
</script>

<style scoped lang="scss">
.container {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 5rem;
  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .apps {
  }
  .top-download {}
}
</style>